import React, { Component } from 'react'
import { Footer, FooterTab, Button } from 'native-base'
import { Text } from 'react-native'
import { Actions } from 'react-native-router-flux'

import API from '../../api/request'
import { tabList } from './data'
import commonStyle from '../../libs/commonStyle'
const SAVE_FLAG = 'footerTabList'

export default class Tab extends Component {
  constructor (props) {
    super(props)
    this.state = {
      list: []
    }
    this.loadFromLocal()
  }
  async loadFromLocal () {
    let list
    try {
      list = await global.storage.load({
        key: SAVE_FLAG
      })
    } catch (e) {
      console.log('load home list err', e)
    }
    this.setState({
      list: list || tabList
    })
  }
  async componentDidMount () {
    let res = await API.getHomeTab()
    let list = (res && res.data) || tabList
    this.setState({
      list
    })
    global.storage.save({
      key: SAVE_FLAG,
      data: list,
      expires: null
    })
  }
  tabPressHandle (item) {
    Actions[item.actions]()
  }
  render () {
    const curAction = this.props.action
    return (
      <Footer>
        <FooterTab>
          {this.state.list.map((item, index) => {
            return (
              <Button
                onPress={() => {
                  this.tabPressHandle(item)
                }}
              >
                <Text
                  style={[
                    item.actions === curAction ? commonStyle.colorOrange : ''
                  ]}
                >
                  {item.title}
                </Text>
              </Button>
            )
          })}
        </FooterTab>
      </Footer>
    )
  }
}
